<!DOCTYPE html><!-- 指明html的版本 html 5.0  HTML-Hyper Text Markup Language-->
<html><!--开始标签，既有开始标签，也有结束标签的标签，称为双标签-->
    <!-- html: 标签名，html也称为根标签，每个页面中原则上只能有一个 -->
    <!-- 标签体 -->
    <!-- 子标签 -->
    <head>
        <!-- head中的内容是对页面内容的说明 -->
        <!-- title: 页面的标题 -->
        <title>This is my first page</title>
        <!-- 单标签 -->
        <!-- meta: 元数据，用来定义数据的数据 -->
        <!-- charset: 属性，'utf-8'：属性的值 -->
        <meta charset="utf-8">
        <!-- style: 给网页添加样式 -->
        <!-- CSS：Cascading Style Sheet 层叠样式表 -->
        <style>
            /* h1: 元素选择器 */
            h1 {
                /* 具体的样式代码 */
                color: darkorange;
            }
            /* critical class选择器 */
            .critical {
                color: red;
            }
        </style>
        <!-- link: 用于引入外部样式文件 -->
        <link rel="stylesheet" href="style.css">
        <!-- script: 页面脚本，JavaScript -->
        <script>
            console.log('你好！');

            // 定义一个函数
            function f(){
                alert('今天是个好天气！');
            }
        </script>
    </head>
    <body>
        <!-- body中是需要展现给用户的内容 -->
        <h1>年轻人为什么要躺平?</h1>
        <!-- 多个类选择器之间用空格隔开 -->
        <h1 class="critical myfont">台湾疫情失控！</h1>

        <button onclick="f();">欢迎</button>
    </body>
</html><!--结束标签-->